<template>
    <div id="newbind">
        <div class="tips fs-12 fw-400">
            提示：为保障您的权益，请保证本账户认证信息
            <!-- <span class="name">徐银行</span> -->
            与微信实名信息相同，否则会造成权益受损。
        </div>

        <div class="login-form dis-flex flex-dir-column flex-y-center mt-20">
            <van-form @submit="onSubmit">
                <van-field
                    name="machineCoding"
                    v-model="machineCoding"
                    placeholder="请扫描填写或手动输入设备SN码"
                >
                    <template slot="left-icon">
                        <img
                            src="../../../assets/img/pos_machines.svg"
                            alt=""
                        />
                    </template>
                    <template slot="extra">
                        <img
                            @click="clickScanner"
                            src="../../../assets/img/Scan_Code.svg"
                            alt=""
                        />
                    </template>
                </van-field>
                <van-field
                    v-model="securityCode"
                    name="securityCode"
                    placeholder="请输入设备安全码"
                >
                    <template slot="left-icon">
                        <div
                            class="idcard-img dis-flex flex-x-center flex-y-center"
                        >
                            <img
                                src="../../../assets/img/anquanma@1x.svg"
                                alt=""
                            />
                        </div>
                    </template>
                </van-field>
                <!-- <div class="common-btn-big fw-600 b-red mt-24" @click="onBind">
                    设备绑定
                </div> -->

                <van-button
                    class="common-btn-big fw-600 b-red"
                    :loading="loading"
                    type="primary"
                    loading-type="spinner"
                    loading-text="设备绑定"
                    @click="onBind"
                    >设备绑定</van-button
                >
            </van-form>
        </div>

        <div class="notice fs-14 fw-400">
            <p>绑定须知：</p>
            <p>1、每台设备SN仅可绑定一次；</p>
            <p>2、绑定多个设备，每个设备独立计算奖励和活动；</p>
            <p>
                3、如有问题，请点击“<span class="col-blue" @click="contact"
                    >联系客服</span
                >”。
            </p>
        </div>

        <van-dialog @confirm="onScanner" v-model="show" title="温馨提示">
            <div
                class="dialog-content mt-12 dis-flex flex-dir-column flex-y-center"
            >
                <div class="prl-16 fs-15 fw-400">
                    请对准刷卡机背面
                    <span class="fw-b">长条二维码</span> 进行扫码，<span
                        class="col-red"
                        >切勿</span
                    >
                    扫到正方形二维码
                </div>
                <img src="../../../assets/img/bar_code.png" alt="" />
            </div>
        </van-dialog>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    export default {
        props: [], // 父辈向子辈传参
        name: 'bind',
        components: { // 组件的引用

        },
        data() {
            return {
                machineCoding: '',
                securityCode: '',
                phone: '',
                show: false,
                loading: false
            }
        },
        methods: {
            onSubmit() {

            },
            clickScanner() {
                // return 
                this.show = true
            },
            contact() {
                if (this.phone) {
                    window.location.href = `tel:` + this.phone;
                }
            },
            async getPhone() {
                let res = await this.$api.accredit.getServiceApi()
                if (res.code == 200) {
                    this.phone = res.data
                }
            },
            async onBind() {
                if (!this.machineCoding) {
                    Toast.fail('请输入设备SN码');
                    return
                }
                if (!this.securityCode) {
                    Toast.fail('请输入设备安全码');
                    return
                }
                // Toast.loading({
                //     message: '绑定中...',
                //     forbidClick: true,
                // });

                this.loading = true
                try {
                    let res = await this.$api.accredit.bindEquipmentApi({
                        machineCoding: this.machineCoding,
                        securityCode: this.securityCode,
                        defaultState: 0
                    })
                    console.log('绑定返回信息', res)
                    if (res.code == 200) {
                        Toast('绑定成功')
                        this.$router.back(-1);
                        this.loading = false
                    }
                } catch (error) {
                    console.log("错误", error);
                    this.loading = false
                    Toast(error.message)
                }

            },
            getConfig() {
                // let url = this.$utils.func.extractBaseUrl(window.location.href)
                let url = window.location.href.split('#')[0];
                console.log("微信配置", url);
                const _this = this
                this.$api.app.wxConfigApi({
                    bindUrl: encodeURIComponent(url)
                }).then((res) => {
                    console.log("获取的签名", res);
                    let value = res.data
                    _this.$wx.config({
                        // 这里需要根据你的实际情况进行配置
                        debug: false,
                        appId: value.appid,
                        timestamp: value.timestamp,
                        nonceStr: value.nonceStr,
                        signature: value.signature,
                        jsApiList: ['checkJsApi', 'scanQRCode']
                    });

                    _this.$wx.error(function (res) {
                        console.log('微信配置出错：', res);
                        Toast("出错了：" + res.errMsg)
                    });

                    _this.$wx.ready(() => {
                        _this.$wx.checkJsApi({
                            jsApiList: ['scanQRCode'],
                            success: function (res) {
                            }
                        });
                    });

                }).catch((err) => {

                });

            },
            onScanner() {
                console.log("扫描");
                const _this = this
                this.$wx.scanQRCode({
                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ["barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                    success: function (res) {
                        console.log("扫码结果", res);
                        let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                        if (result.indexOf(",") != -1) {
                            let str = result.split(',');
                            result = str[1];
                        }
                        _this.machineCoding = result
                    }
                });
            },
        },
        computed: {},
        watch: {},
        created() {
            this.getPhone()
            this.getConfig()
        },
        mounted() { },
    }
</script>
    
<style scoped lang='scss'>
    .van-button--primary {
        border: none;
        background: linear-gradient(180deg, #f53137, #f53137);
        margin-top: 0 !important;
    }
    #newbind {
        height: 100vh;
        background-color: #fff;
    }
    .tips {
        width: 375px;
        background: #ffefe6;
        color: #ff6619;
        line-height: 18px;
        padding: 14px 16px;
        box-sizing: border-box;
        .name {
            color: #f53137;
            font-weight: 500;
        }
    }
    .login-form {
        margin-top: 48px;
        .van-cell {
            width: 344px;
            height: 48px;
            border: 1px solid #f53137;
            border-radius: 6px;
            margin-bottom: 16px;
            padding: 0;
            display: flex;
        }
        .van-field {
            display: flex;
            align-items: center;
            & > img {
                width: 24px !important;
                height: 24px !important;
                margin-right: 16px;
            }
        }
        .idcard-img {
            width: 40px;
            height: 40px;
            & > img {
                width: 26px;
                height: 26px;
            }
        }

        .van-field__left-icon > img {
            display: block;
            width: 40px;
            height: 40px;
            object-fit: contain;
        }
        .van-button {
            border-radius: 7px;
            font-size: 18px;
            font-weight: 700;
            margin-top: 24px;
            box-sizing: border-box;
        }

        ::v-deep .van-field__value {
            display: flex;
            align-items: center;
            padding: 0;
            box-sizing: border-box;
            flex: 1;
            font-size: 14px;
        }

        ::v-deep .van-field__left-icon {
            display: flex;
            align-items: center;
        }
        ::v-deep .van-field__body {
            width: 100%;
            .van-field__control::-webkit-input-placeholder {
                font-weight: 400;
                font-size: 14px;
                color: #ccc8c8;
                line-height: 14px;
            }
        }
    }

    .notice {
        color: #121836;
        line-height: 20px;
        padding: 0 16px;
        margin-top: 60px;
    }

    .van-dialog {
        width: 270px;
        height: 224px;
        background: #ffffff;
        border-radius: 6px;
        ::v-deep .van-dialog__header {
            padding-top: 25px !important;
            font-weight: bold;
            font-size: 17px;
            color: #1d2129;
        }
        .dialog-content {
            flex: 1;
            & > div {
                font-size: 15px;
                color: #4e5969;
                line-height: 22px;
                text-align: center;
                font-style: normal;
            }
            & > img {
                width: 238px;
                height: 34px;
                margin-top: 16px;
            }
        }
        ::v-deep .van-dialog__footer {
            border-top: 1px solid #e5e6eb;
            margin-top: 24px;
            height: 45px !important;
            .van-button__text {
                font-weight: 400;
                font-size: 18px;
                color: #0077ff;
            }
        }
    }
</style>